<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单词详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-6 py-3 bg-white">
        <span class="text-sm font-medium text-gray-800">9:41</span>
        <div class="flex items-center space-x-1 text-gray-800">
            <i class="fas fa-signal text-sm"></i>
            <i class="fas fa-wifi text-sm"></i>
            <i class="fas fa-battery-three-quarters text-sm"></i>
        </div>
    </div>

    <!-- 头部 -->
    <div class="bg-white px-6 py-4 border-b border-gray-100">
        <div class="flex items-center justify-between">
            <i class="fas fa-arrow-left text-gray-600 text-xl"></i>
            <h1 class="text-xl font-bold text-gray-800">单词详情</h1>
            <div class="flex items-center space-x-3">
                <i class="fas fa-heart text-gray-400 text-xl"></i>
                <i class="fas fa-share-alt text-gray-600 text-xl"></i>
            </div>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="px-6 py-6 pb-20">
        <!-- 单词卡片 -->
        <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-3xl p-8 text-white text-center mb-6">
            <img src="https://images.unsplash.com/photo-1574781330855-d0db8cc6a79c?w=150&h=150&fit=crop" 
                 alt="猫" class="w-32 h-32 rounded-2xl mx-auto mb-6 object-cover border-4 border-white/20">
            <h2 class="text-4xl font-bold mb-3">Cat</h2>
            <p class="text-xl text-white/90 mb-4">/kæt/</p>
            <p class="text-lg text-white/80 mb-6">猫，猫科动物</p>
            
            <div class="flex justify-center space-x-4">
                <button class="bg-white/20 backdrop-blur-sm border border-white/30 text-white px-6 py-3 rounded-full flex items-center">
                    <i class="fas fa-volume-up mr-2"></i>
                    发音
                </button>
                <button class="bg-white/20 backdrop-blur-sm border border-white/30 text-white px-6 py-3 rounded-full flex items-center">
                    <i class="fas fa-redo mr-2"></i>
                    重复
                </button>
            </div>
        </div>

        <!-- 词性和释义 -->
        <div class="bg-white rounded-2xl p-6 mb-6 shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">词性与释义</h3>
            <div class="space-y-3">
                <div class="flex items-start space-x-3">
                    <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded text-sm font-medium">n.</span>
                    <div>
                        <p class="text-gray-800 font-medium">猫</p>
                        <p class="text-gray-500 text-sm">家养的小型肉食性哺乳动物</p>
                    </div>
                </div>
                <div class="flex items-start space-x-3">
                    <span class="bg-green-100 text-green-600 px-2 py-1 rounded text-sm font-medium">n.</span>
                    <div>
                        <p class="text-gray-800 font-medium">猫科动物</p>
                        <p class="text-gray-500 text-sm">包括狮子、老虎等大型猫科动物</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 例句 -->
        <div class="bg-white rounded-2xl p-6 mb-6 shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">例句</h3>
            <div class="space-y-4">
                <div class="border-l-4 border-blue-500 pl-4">
                    <p class="text-gray-800 font-medium mb-1">"The cat is sleeping on the sofa."</p>
                    <p class="text-gray-500 text-sm">猫在沙发上睡觉。</p>
                    <button class="text-blue-500 text-sm mt-2 flex items-center">
                        <i class="fas fa-volume-up mr-1"></i>
                        听发音
                    </button>
                </div>
                <div class="border-l-4 border-green-500 pl-4">
                    <p class="text-gray-800 font-medium mb-1">"I have a black cat."</p>
                    <p class="text-gray-500 text-sm">我有一只黑猫。</p>
                    <button class="text-green-500 text-sm mt-2 flex items-center">
                        <i class="fas fa-volume-up mr-1"></i>
                        听发音
                    </button>
                </div>
            </div>
        </div>

        <!-- 相关单词 -->
        <div class="bg-white rounded-2xl p-6 mb-6 shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">相关单词</h3>
            <div class="grid grid-cols-2 gap-3">
                <div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-xl">
                    <img src="https://images.unsplash.com/photo-1552053831-71594a27632d?w=50&h=50&fit=crop" 
                         alt="狗" class="w-10 h-10 rounded-lg object-cover">
                    <div>
                        <p class="font-medium text-gray-800">Dog</p>
                        <p class="text-gray-500 text-sm">狗</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-xl">
                    <img src="https://images.unsplash.com/photo-1425082661705-1834bfd09dca?w=50&h=50&fit=crop" 
                         alt="鸟" class="w-10 h-10 rounded-lg object-cover">
                    <div>
                        <p class="font-medium text-gray-800">Bird</p>
                        <p class="text-gray-500 text-sm">鸟</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-xl">
                    <img src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?w=50&h=50&fit=crop" 
                         alt="鱼" class="w-10 h-10 rounded-lg object-cover">
                    <div>
                        <p class="font-medium text-gray-800">Fish</p>
                        <p class="text-gray-500 text-sm">鱼</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3 p-3 bg-gray-50 rounded-xl">
                    <img src="https://images.unsplash.com/photo-1585110396000-c9ffd4e4b308?w=50&h=50&fit=crop" 
                         alt="兔子" class="w-10 h-10 rounded-lg object-cover">
                    <div>
                        <p class="font-medium text-gray-800">Rabbit</p>
                        <p class="text-gray-500 text-sm">兔子</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 练习按钮 -->
        <div class="grid grid-cols-2 gap-4">
            <button class="bg-blue-500 text-white py-4 rounded-2xl font-semibold flex items-center justify-center">
                <i class="fas fa-gamepad mr-2"></i>
                开始练习
            </button>
            <button class="bg-green-500 text-white py-4 rounded-2xl font-semibold flex items-center justify-center">
                <i class="fas fa-plus mr-2"></i>
                加入复习
            </button>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-3">
            <div class="text-center">
                <i class="fas fa-home text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">首页</span>
            </div>
            <div class="text-center">
                <i class="fas fa-book text-blue-500 text-xl mb-1"></i>
                <span class="text-blue-500 text-xs font-medium">学习</span>
            </div>
            <div class="text-center">
                <i class="fas fa-gamepad text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">游戏</span>
            </div>
            <div class="text-center">
                <i class="fas fa-chart-line text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">进度</span>
            </div>
            <div class="text-center">
                <i class="fas fa-user text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">我的</span>
            </div>
        </div>
    </div>
</body>
</html>